import type { ComponentsArgs } from '../types'
import InputField from './InputField'
import RowPiece from './RowPiece'
import ColPiece from './ColPiece'
import FormItemPiece from './FormItemPiece'
import InputNumberField from './InputNumberField'
import TextPiece from './TextPiece'
import ColorPickerField from './ColorPickerField'
import DividerPiece from './DividerPiece'
import SelectField from './SelectField'
import FormItemLogoField from './FormItemLogoField'
import RadioGroupField from './RadioGroupField'
import SliderField from './SliderField'
import TextIconPosition from './TextIconPosition'
import FontSizeField from './FontSizeField'
import CollapseField from './CollapseItem'

export const components = (data: ComponentsArgs): JSX.Element => {
  const CompsMaps: {
    [k in string]: () => JSX.Element
  } = {
    // done
    divider: () => <DividerPiece schema={data.schema} slots={data.slots} />,
    // done
    text: () => <TextPiece schema={data.schema} slots={data.slots} />,
    // done
    row: () => <RowPiece schema={data.schema} slots={data.slots} />,
    // done
    col: () => <ColPiece schema={data.schema} slots={data.slots} />,
    // done
    'form-item': () => <FormItemPiece schema={data.schema} slots={data.slots} />,
    // done
    size: () => {
      return <FontSizeField onValueChange={(v) => data.valueChange(v)} schema={data.schema} slots={data.slots} />
    },
    // done
    'form-item-logo': () => (
      <FormItemLogoField onValueChange={(v) => data.valueChange(v)} schema={data.schema} slots={data.slots} />
    ),
    // done
    'form-item-bg-image': () => (
      <FormItemLogoField onValueChange={(v) => data.valueChange(v)} schema={data.schema} slots={data.slots} />
    ),
    // done
    input: () => {
      return <InputField onValueChange={(v) => data.valueChange(v)} schema={data.schema} slots={data.slots} />
    },
    // done
    'input-number': () => (
      <InputNumberField onValueChange={(v) => data.valueChange(v)} schema={data.schema} slots={data.slots} />
    ),
    // done
    color: () => {
      return <ColorPickerField onValueChange={(v) => data.valueChange(v)} schema={data.schema} slots={data.slots} />
    },
    // done
    select: () => <SelectField onValueChange={(v) => data.valueChange(v)} schema={data.schema} slots={data.slots} />,
    // done
    'radio-group': () => (
      <RadioGroupField onValueChange={(v) => data.valueChange(v)} schema={data.schema} slots={data.slots} />
    ),
    // done
    slider: () => <SliderField onValueChange={(v) => data.valueChange(v)} schema={data.schema} slots={data.slots} />,
    // done
    'text-icon-position': () => (
      <TextIconPosition onValueChange={(v) => data.valueChange(v)} schema={data.schema} slots={data.slots} />
    ),
    'collapse-item': () => <CollapseField schema={data.schema} slots={data.slots} />
  }
  return CompsMaps[data.schema.tag] ? CompsMaps[data.schema.tag]() : <i></i>
}
